<template>
  <div class="RoleAdmin">
    <a-card>
      <a-row>
        <a-col :span="8">
          <router-link to="/home/accessadmin/roleadmin/roleadd">
            <a-button type="primary" icon="plus">新建</a-button>
          </router-link>
        </a-col>
        <!-- <a-col :span="16" style="text-align:right">
          <a-input-search placeholder="请输入" style="width: 200px" v-model="inputSearch" />
        </a-col> -->
      </a-row>
      <a-table
        style="margin-top:2%"
        :columns="columns"
        :dataSource="data"
        :pagination="pagination"
        @change="handleTableChange"
        :rowKey="record => record.authorityId"
      >
        <template slot="status" slot-scope="text,record">
          <a-switch checkedChildren="开" unCheckedChildren="关" :checked="record.status" />
        </template>
        <template slot="operate" slot-scope="text,record">
          <a href="javascript:;" @click="editInfo(text,record)">编辑</a>
          <a-divider type="vertical" />
          <a href="javascript:;" @click="delConfirm(text,record)">删除</a>
        </template>
      </a-table>
    </a-card>
  </div>
</template>

<script>
const columns = [
  {
    title: "名称",
    dataIndex: "designation",
    scopedSlots: { customRender: "name" },
    align: "center"
  },
  {
    title: "状态",
    dataIndex: "status",
    scopedSlots: { customRender: "status" },
    align: "center"
  },
  {
    title: "创建时间",
    dataIndex: "createTime",
    scopedSlots: { customRender: "latelyTime" },
    align: "center"
  },
  {
    title: "操作",
    dataIndex: "",
    scopedSlots: { customRender: "operate" },
    align: "center"
  }
];
const data = [
  {
    key: "1",
    userName: "1234",
    name: "口水娃玉米味烤肠袋装50g",
    phone: "",
    userRole: "1",
    status: "",
    latelyTime: "",
    operate: ["编辑", "上架"]
  }
];
export default {
  name: "RoleAdmin",
  data() {
    return {
      columns,
      data: [],
      pagination: {
        showSizeChanger: true,
        showQuickJumper: true,
        pageSizeOptions: ["10", "20", "30", "40"], //每页条数选择器
        showTotal: (total, range) => {
          return `${range[0]}-${range[1]} 共${total}条`;
        }, // 总数展示
        pageSize: 10, //每页条数
        defaultCurrent: 1, //默认当前页
        current: 1, //当前页
        total: 50 //数据总条数
      },
      inputSearch: ""
    };
  },
  methods: {
    handleReset() {
      this.form.resetFields();
    },
    delConfirm(text, record) {
      var that = this;
      this.authorityId = record.authorityId;
      this.$confirm({
        title: "确认要删除此角色吗？",
        content: "删除此角色后，此角色下的人员仅能登录系统",
        okText: "确定",
        cancelText: "取消",
        iconType: "info-circle",
        onOk() {
          that.delete(that.authorityId);
        },
        onCancel() {}
      });
    },

    handleTableChange(pagination, filters, sorter) {
      const pager = { ...this.pagination };
      pager.current = pagination.current;
      pager.pageSize = pagination.pageSize;
      pager.total = pagination.total;
      this.pagination = pager;
     
      this.search();
    },

    // 返回管理人员列表数据
    search($event) {
      if($event){
        this.pagination.current=1
      }
      this.axios
        .post(this.baseUrl + "/authority/search", {
          loginToken: this.$store.state.loginToken,
          pageNum: this.pagination.current,
          pageSize: this.pagination.pageSize,
          designation: this.inputSearch,
          sortType: 1
        })
        .then(response => {
          // console.log(response);
          this.data = response.data.data.list;
          this.pagination.total = response.data.data.total;
          this.pagination.pageSize = response.data.data.pageSize;
          this.pagination.current = response.data.data.pageNum;
        });
    },

    // 删除角色
    delete(authorityId) {
      this.axios
        .post(this.baseUrl + "/authority/delete", {
          loginToken: this.$store.state.loginToken,
          authorityId: authorityId
        })
        .then(response => {
          // console.log(response);
          if (response.data.code == 0) {
            this.$message.success("删除成功");
            this.search();
          }
        });
    },

    // 编辑商品跳页传ID
    editInfo(text, record) {
      var authorityId = record.authorityId;
      this.$store.commit("authorityId", authorityId);
      this.$router.push({
        path: "/home/accessadmin/roleadmin/roleedit"
      });
    }
  },
  created() {
    this.search();
  },
  mounted() {}
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.RoleAdmin {
  width: 100%;
}
</style>
